<template>
  <!-- 黄色的头部 -->
  <div class="header">
    <div>
      <img src="@/assets/logo-font.png" alt="Cartoonist" class="logo-font">
    </div>
    <!-- 生成书 -->
    <div class="input_box1" v-show="inputBox1Visable">
      <div style="float: left;"><img src="@/assets/input_box_logo.png" alt="图片加载失败" class="input_box_logo"></div>
      <input type="text" :placeholder="bookNamePlaceholder" class="input_book_name_text" v-model="bookName">
      <div style="border: 0.1px solid rgba(160, 160, 160, 0.105); width: 60%; margin-left: 0;"></div>
      <textarea v-model="bookSummary"  class="input_relative_sentence" cols="30" rows="3" :placeholder="bookSummaryPlaceholder"></textarea>
    </div>
    <!-- 生成故事 -->
    <div class="input_box2" v-show="inputBox2Visable">
      <div style="float: left;"><img src="@/assets/input_box_logo.png" alt="图片加载失败" class="input_box_logo"></div>
      <input type="text" :placeholder="paraTitlePlaceholder" class="input_book_name_text" v-model="paraTitle">
      
      <textarea v-model="paraSummary"  class="input_summary_sentence" cols="30" rows="3" :placeholder="paraContentPlaceholder"></textarea>
    </div>
    <button class="create_main_page_button"  v-show=isShow @click="generateBook">封面</button>
    <button class="create_story_button" @click="generateStory">故事</button>
  </div>
  <!-- end -->

  <!-- 头部以下的区域 -->
  <div style="float: right; margin-top: 0.8%; margin-right: 2%; font-size: 18px; line-height: 10px;">你好，Qkai</div>
  <!-- 上下分界线 -->
  <div style="border: 1px solid rgb(220, 218, 214); margin-top: 2%; margin-left: 2%;"></div>
  
  <div class="main_box">
    <!-- 左边导航栏 -->
    <div class="left_box">
      <div style="margin-top: 5%; margin-left: 10%; margin-right: 10%;">
        <p style="font-family: '黑体'; font-size: 20px;" v-if="bookName === ''">书名</p>
        <p style="font-family: '黑体'; font-size: 20px; color: black;" v-else>{{ bookName }}</p>
        <!-- 第一本书 -->
        <div class="add_book_black_line"></div>
        <div class="add_book" @click="add_book">
          <div class="add_book_text">点击添加书籍</div>
        </div>
        
        <!-- 这里要一个加书的按钮 -->
        <div class="add_book_underline">
          <div class="add_book_grey_line"></div>
          <button class="add_book_button">加书</button>
        </div>
        
      </div>
    </div>

    <!-- 左右分界线 -->
    <div style="border-left: 2px solid rgb(220,218,214);"></div>
    
    <!-- 右边→→→→→→ -->
    <div class="right_box">
      <!-- 这个里面是一整个放段落的框框 -->
      <div class="boxAll">
        <div class="tabs-row">
          <p class="tabs current" >编辑模式</p>
          <p class="tabs" @click="toReadMode">阅读模式</p>
        </div>
        <div style="border: 3px solid black"></div>
        <div class="Box" id="box">
            <div class="con" style="display:block">
              <div class="content">
                <div class="paraHead">
                  <div class="paraTitle">{{ paraTitle }}</div>
                </div>
                <div class="paraMain">
                  {{ paraContent }}
                </div>
                <button class="nextParaButton">续写</button>
                <div class="paraFooter"></div>
                <!-- <div class="content-row">
                  <h2>{{ paraTitle }}</h2>
                </div> -->
                <!-- <div class="content-row">
                  <p>●</p>
                  <p>第二行的内容</p>
                  <p>2</p>
                </div>
                <div class="paging">
                  <p class="page">1</p>
                  <p class="count">
                    <span>共 </span><span> 6 </span><span> 页</span>
                  </p>
                  
                </div> -->
              </div>
            </div>
            <div class="con">内容2</div>
        </div>
        <div class="boxNULL">
          <div class="con" style="display:block">
            <div class="content" style="position: relative;">
              <div style="font-size: 28px; margin-left: 20px;">{{ paraTitle }}</div>
              <div style="border: 1px solid rgb(221, 227, 233); position: absolute;top: 34px; margin-left: 5%; width: 90%;"></div>
              <div style="font-size: 20px; margin-left: 20px;">{{ paraSummary }}</div>
            </div>
          </div>
          <div class="con">内容2</div>
        </div>
        <!-- 这里要一个加段的按钮 -->
        <div class="add_paragraph">
          <button class="add_paragraph_button">加段</button>
        </div>
        <div class="para_create_time_box">
          <div>{{ paraCreateTime }}</div>
          <div class="add_paragraph_grey_line"></div>
        </div>
        
        
      </div>
      <div class="comicBox" >
        <div class="comicHead">
          <button class="comicButton" @click="generateComic">漫画</button>
          <button class="comicPrePic" v-show="comicTabsShow">上一张</button>
          <button class="comicNextPic" v-show="comicTabsShow">下一张</button>
        </div>
        <div class="comixMain" v-show="comicTabsShow">
              <!-- 第一本书 -->
              
              <div class="comic_pic" v-show="comicTabsShow">
                这里面放漫画
              </div>
              <div class="comic_main_black_line"></div>
              
        </div>
      </div>
      

      <div class="nothing_in_right_box">空空如也</div>
      </div>

  </div>


</template>
<style>
.comixMain{
  width: 260px;
  height: 210px;
  box-shadow:  3.3px 1.6px 1.6px hsl(0deg 0% 0% /0.20);
  margin-top: 20px;
  position: relative;
}
.comic_main_black_line{
  border: 3px solid black;
  position: absolute;
  bottom: -20px;
  width: 100%;
  
}
</style>
<script>
import $ from 'jquery'
export default {

  data(){
    return{
      bookName:'',
      bookSummary:'',
      bookMainPagePicUrl:'https://th.bing.com/th/id/OIP.Ua48fYrXr9Qy-2denO-mAwAAAA?pid=ImgDet&rs=1',
      bookNamePlaceholder:'请输入书名',
      bookSummaryPlaceholder:'请输入相关词句，例如三个女孩儿，漫画家',
      paraCreateTime:'2023/6/1 16:38',
      paraTitle:'',
      paraSummary:'',
      paraContent:'这是一段生成的故事~~',
      paraTitlePlaceholder:'输入标题',
      paraContentPlaceholder:'请输入故事正文，你可以写一段故事开头，也可以输入一个词语，或者主人公名字',
      inputBox1Visable:false,
      inputBox2Visable:false,
      comicTabsShow:false
    }
    
  },
  mounted(){
    $('.create_main_page_button').slideUp(1);
    $('.add_book_underline').slideUp(1)
    $('.boxAll').slideUp(1)
    $('.create_story_button').slideUp(1)
    $('.input_box1').slideUp(1);
    $('.input_box2').slideUp(1);
    $('.Box').slideUp(1);
    $('.comicBox').slideUp(1);
  },
  methods:{
    add_book () {
      if(!this.inputBox2Visable && !this.inputBox1Visable){
      //0--改布局
      $('.left_box').animate({
        'width':'19%'
      },500)
      //1--让输入框框和按钮显示出来
      $('.input_box1').slideDown(500);
      $('.create_main_page_button').slideDown(500);

      //2--让头部慢慢变高
      $('.header').animate({
        'height': '150px'
      },500);

      //3--让字体变大
      $('.logo-font').animate({
        'width': '25%',
        'margin-top':'3%',
        'margin-bottom':'3%',
        'margin-left':'2%'
      },500);

      //4--让“点击添加书籍被绿色遮住”
      $('.add_book').animate({
        'height': '97%',
        'padding-bottom':'104%'
      },500)
      $('.add_book').css({
        'background-color':'rgb(218, 254, 231)'
      })
      $('.add_book_black_line').animate({
        'width':'200px'
      },500)

      // 5--让文字消失
      $('.add_book_text').fadeOut()
      $('.nothing_in_right_box').fadeOut()
      //5--让加书的按钮出现
      $('.add_book_underline').slideDown(500)
      //5--让框框出现
      $('.boxAll').slideDown(500);
      
      this.changeTabs()
      }
      
    },
    // 切换tabs的功能
    changeTabs(){
      var tabs = $('.tabs')
      var divs = $('.con')
      
      for(var i=0;i<tabs.length;i++){
        var btn = tabs[i];
        btn.index = i;
        btn.onclick = function(){
        
          for(var j=0;j<tabs.length;j++){
                tabs[j].classList.remove('current');
            }
            this.classList.add('current');
            for(var k = 0;k<divs.length;k++){
                divs[k].style.display = 'none';
            }
            divs[this.index].style.display = 'block';
        }
      }
    },
    // 生成书
    generateBook(){
      {
        //先生成插画，再来按钮
        this.loadBookMainPic()
        // 使用animate()函数改变<div>元素的位置
        $('.create_main_page_button').animate({
          // 'right': '-130px',
          'top': '-30px'
        }, 500).fadeOut(1); // 100是动画持续时间（毫秒）
        $('.create_story_button').slideDown(500);
        this.changeInputBox()
      }

      
    },
    //加载出书的封面
    loadBookMainPic(){
      $('.add_book').css({
        'background-image':'url('+this.bookMainPagePicUrl+')',
        'background-size': '100% 100%',
        'background-repeat': 'no-repeat'
      })
      $('.add_book').animate({
        'padding-bottom':'100%'
      },500)
    },
    //改变输入框
    changeInputBox(){
      
      $('.input_box1').slideUp(1)

      $('.input_box2').slideDown(500)
      // 标记输入框为出现
      this.inputBox2Visable=true
    },
    //生成故事
    generateStory(){
      $('.boxNULL').slideUp(1)
      $('.Box').slideDown(500);
      $('.comicBox').slideDown(500);
    },
    generateComic(){
      this.comicTabsShow = true
    },
    toReadMode(){
      window.location.href = 'readmode'
    }
  }
}

</script>

<!-- 头部的style -->
<style>
/* 头部框框 */
.header{
  background-color: rgb(255, 213, 21);
  height: 10%;
  width: 100%;
  box-shadow:  3.3px 6.6px 6.6px hsl(0deg 0% 0% /0.20);
}
/* cartoonist的字体 */
.logo-font{
  margin-left: 5%;
  margin-top: 1%;
  margin-bottom: 1%;
  width:  14%;
}
/* 输入框 */
.input_box1,.input_box2{
  float: right;
  position: absolute;
  right: 360px;
  width: 650px;
  height: 130px;
  border: 2px solid black;
  border-radius: 10px;
  top: 1%;
  margin-bottom: 2%;
}
/* 输入框的那根笔 */
.input_box_logo{
  width: 40px;
  margin-top: 2%;
  margin-left: 2%;
}
/* 输入书名的输入框 */
.input_book_name_text{
  background: none;
  border: 0;
  font-size: 30px;
  color: rgb(133, 111, 11);
  margin-left: 1%;
  margin-top: 0.5%;
}
/* 输入相关词句的框框 */
.input_relative_sentence,.input_summary_sentence{
  background: none;
  border: 0;
  font-size: 20px;
  font-family: '微软雅黑';
  color: rgb(133, 111, 11);
  margin-left: 0.8%;
  margin-top: 0.5%;
  width: 90%;
}
input{
  all:unset
}
textarea{
  all:unset
}

</style>


<!-- 下面的左边的style -->
<style>

.main_box{
  display: flex;
  margin-left: 2%;
}
.left_box{
  width: 20%;
  height: 100%;
}
.right_box{
  width: 80%;
  height: 100%;
}
/* ======================左边添加书籍的框框============================ */
/* 添加书籍的黑色的线 */
.add_book_black_line{
  border: 4px solid black; 
  width: 97%;
}
/* 点击添加书籍（框框） */
.add_book{
  background-color: rgb(252, 249, 243); 
  width:100%;
  padding-bottom : 107%;
  margin-top: 10px;
  box-shadow:  2px 2px 2px 2px hsla(0, 0%, 52%, 0.3);
}
/* 点击添加书籍（文字） */
.add_book_text{
  font-size: 30px; 
  position: absolute;
  text-align: center; 
  font-family: '微软雅黑';
  color: rgb(218, 215, 210); 
  margin-top: 5%;
  margin-left: 1%;
}
.nothing_in_right_box{
  font-size: 60px; 
  text-align: center; 
  font-family: '微软雅黑';
  color: rgb(218, 215, 210); 
  margin-top: 20%;
}
/* 加书 */
.add_book_grey_line{
  border: 1px solid rgb(210, 209, 204);
  width: 100%;
  margin-top: 10%;
}


</style>


<!-- 放文段内容的文本框框 -->
<style>
    html{color:#c8c8c8;background:#FFF;} 
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
    fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
    }
    .boxAll{
      width: 50%;
      margin-left: 5%;
      margin-top: -4px;
      float: left;
      
    }
    .boxNULL{
      width: 100%;
      height: 210px;
      border: 1px solid #e1e1e1;
      margin-top: 10px;
      box-shadow:  3.3px 1.6px 1.6px hsl(0deg 0% 0% /0.20);
    }
    .Box{
        width: 100%;
        height: 210px;
        border: 1px solid #e1e1e1;
        margin-top: 10px;
        box-shadow:  3.3px 1.6px 1.6px hsl(0deg 0% 0% /0.20);
    }
    .tabs-row{
      overflow: hidden;
      border-bottom: 1px solid #e1e1e1;
    }
    .tabs{
      width: 86px;
      text-align: center;
      float: left;
      margin-right: 26px;
      font-size: 18px;
      margin-top: 3%;
      font-family: '微软雅黑';
    }
    .con{
        width: 100%;
        display:none;
    }
    .current{
        color: black;
    }
    .content-row{
      overflow: hidden;
      height: 50px;
      border-bottom: 1px dashed #e1e1e1;
      padding: 0 17px 0 8px;
    }
    .content-row p{
      line-height: 50px;
      color: #848484;
    }
    .content-row p:first-child{
      margin-right: 16px;
    }
    .content-row p:first-child,
    .content-row p:nth-child(2){
      float: left;
    }
    .content-row p:last-child{
      float: right;
    }
    .paging{
      margin-top: 3px;
      overflow: hidden;
    }
    .paging p{
      float: right;
      line-height: 26px;
    }
    .page{
      width: 26px;
      height: 26px;
      background-color: #407bb3;
      border-radius: 5px;
      text-align: center;
      line-height: 26px;
      color: white;
      margin-bottom: 20px;
      margin-right: 26px;
    }
    /* 创建时间 */
    .para_create_time_box{
      margin-top: 4%;
    }
    /* =========================加段=============================== */
  .add_paragraph_grey_line{
    border: 1px solid rgb(210, 209, 204);
    width: 50%;
  }
  
</style>

<!-- 文本框框里面的文本变化 -->
<style>
.paraHead{
  background-color: rgb(216, 212, 252);
  height: 30px;
  
}
.paraTitle{
  margin-left: 16px;
  font-size: 24px;
  color: black;
}
.paraMain{
  height: 176px;
  color: black;
}
.paraFooter{
  border: 4px solid rgb(216, 212, 252);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

</style>


<!-- 漫画的地盘 -->
<style>
.comicBox{
  width: 40%;
  float: right;
  margin-top: 10px;
  margin-left: 5px;
  
}
.comicHead{
  width: 300px;
  height: 20px;
}
</style>


<!-- 所有的按钮 -->
<style>
/* =====================1--创建封面按钮======================== */
.create_main_page_button,.create_story_button{
  float: right;
  background-color: white;
  height: 30px;
  width: 120px;
  border: 0;
  border-radius: 10px;
  position: absolute;
  right: 200px;
  top: 40px;
  font-size: 24px;
  color: rgb(255, 213, 21);
  box-shadow:  3.3px 2.6px 2.6px hsl(0deg 0% 0% /0.10);
}
.create_main_page_button:hover,.create_story_button:hover{
  background-color: rgb(117, 117, 117);
  color: white;
}
.create_main_page_button:active,.create_story_button:active{
  background-color: white;
  color: rgb(255, 213, 21);
}

/* =====================2--加书按钮============================ */
.add_book_button{
  float: right;
  background-color: rgb(215, 211, 251);
  border: 0;
  border-radius: 2px;
  width: 50px;
  height: 25px;
  text-align: center; 
  font-family: '微软雅黑';
  font-size: 15px;
  color: rgb(92, 92, 91); 
}
.add_book_button:hover{
  background-color: rgb(126, 114, 236);
  color: rgb(223, 223, 223);
}
.add_book_button:active{
  background-color: rgb(215, 211, 251);
  color: rgb(92, 92, 91); 
}

/* =======================3--加段按钮=============================== */
.add_paragraph_button{
  float: right;
  background-color: rgb(205, 255, 226);
  border: 0;
  border-radius: 2px;
  width: 44px;
  height: 24px;
  text-align: center; 
  font-family: '微软雅黑';
  font-size: 16px;
  color: rgb(92, 92, 91); 
  margin-top: 2px;
}
.add_paragraph_button:hover{
  background-color: rgb(141, 220, 174);
  color: rgb(255, 255, 255);
}
.add_paragraph_button:active{
  background-color: rgb(205, 255, 226);
  color: rgb(92, 92, 91); 
}

/* ====================4--续写按钮=============================== */
.nextParaButton{
  background-color: black;
  color: white;
  border-radius: 30px;
  width: 120px;
  font-size: 22px;
  text-align: center;
  position: absolute;
  margin-top: -45px;
  float: right;
  margin-left: 450px;
}
.nextParaButton:hover,.comicButton:hover{
  background-color: white;
  color: black;
}
.nextParaButton:active,.comicButton:active{
  background-color: black;
  color: white;
}
.comicButton{
  background-color: black;
  color: white;
  border-radius: 30px;
  width: 120px;
  font-size: 22px;
  text-align: center;
  
}
/* 生成漫画的按钮 */
.comicPrePic{
  all: unset;
  color: rgb(188, 188, 188);
  font-size: 20px;
  width: 80px;
  text-align: center;
}
.comicNextPic{
  all: unset;
  color: rgb(188, 188, 188);
  font-size: 20px;
  width: 80px;
  text-align: center;
}
.comicPrePic:hover,.comicNextPic:hover{
  color: black;
}
.comicPrePic:active,.comicNextPic:active{
  color: rgb(220,218,214);
}
</style>


